<template>
  <div style="color: #333333;">
    <div style="height:140px">
      <title1></title1>

      <!--头部面包屑-->
      <div class="breadCrumbBox flexCenter">
        <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
          <a-breadcrumb separator=">">
            <a-breadcrumb-item v-if="homeFlag">
              <router-link :to="home">首页</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item href>{{projectTitle}}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
      </div>
    </div>

    <!--主content-->
    <div class="mainContentBox">
      <div class="title1Box flexAlignCenter">项目信息</div>
      <div class="projectDetailBox flexBetween">
         <viewer
          :images="imgUrl"
         >
          <div v-for="(src,index) in imgUrl" :key="index" style="height:100%;width=100%">
            <img :src="src" width="100%" height="100%" />
          </div>
        </viewer>
     
        <div class="projectInfoBox flexDirectionCenter">
          <div class="flexStart flexAlignCenter">
            <span
              :title="projectTitle"
              style="font-size: 22px;font-weight: bold;display: inline-block;width: 450px;word-wrap: break-word;overflow: hidden;word-break: break-all;"
            >
              {{projectTitle}}
              <!-- <span style="color:#1492FF">（示例项目）</span> -->
            </span>
            <div style="width: 20px;"></div>
            <div>
              <a-tag style="border-radius: 0;" color="#1492FF">改扩建</a-tag>
              <a-tag style="border-radius: 0;" color="#1492FF">局直管</a-tag>
            </div>
          </div>
          <!--分割线-->
          <div style="width: 590px;height: 1px;background-color: #E4E4E4"></div>
          <div style="width: 520px;line-height: 29px;margin-top: 0px" class="flexBetween">
            <div style="font-size: 15px">
              <p v-if="briefName!='京沪扩建'">项目编号：2018-320000-48-01-113099</p>
              <p v-else>项目编号：--</p>
              <p v-if="briefName!='京沪扩建'">计划开工时间：2021-06-01</p>
              <p v-else>计划开工时间：2020-04</p>
              <p v-if="briefName!='京沪扩建'">计划竣工时间：2026-12-01</p>
              <p v-else>计划竣工时间：2023-10</p>
              <p>实际完工时间：--</p>
              <p>建设周期：3.5年</p>
              <p v-if="briefName!='京沪扩建'">批复概算（亿元）：95.21</p>
              <p v-else>批复概算（亿元）：312.6</p>
            </div>
            <div style="font-size: 15px">
              <p>项目简称：{{briefName}}</p>
              <p v-if="briefName!='京沪扩建'">计划完工时间：2024-12-01</p>
              <p v-else>计划完工时间：2022-12</p>
              <p>实际完工时间：--</p>
              <p>实际竣工时间：--</p>
              <p v-if="briefName!='京沪扩建'">路线总长（km）：48.966</p>
              <p v-else>路线总长（km）：259.5</p>
              <p>项目状态：在建</p>
            </div>
          </div>
        </div>
      </div>
      <div class="title2Box flexAlignCenter">项目简介</div>
      <div
        class="box"
        :style="styleVar"
        style="width: 100%;overflow: hidden;text-indent: 29px;line-height: 1.8"
        ref="box"
        v-if="briefName!='京沪扩建'"
      >
        沪陕高速公路平潮至广陵段是《国家公路网规划（2013 年-2030 年）》“七射、十一纵、十
        八横”中“横九线”上海至西安高速公路（G40）的重要组成部分，同时也是《江苏省高速公路
        网规划（2017-2035）》“十五射、六纵、十横”中的“射四”线南京至南通高速公路重要组成部
        分，是江北沿江交通大通道的骨架，对区域社会经济发展具有重要的战略支撑作用。
      </div>
      
      <div
        class="box"
        :style="styleVar"
        style="width: 100%;overflow: hidden;text-indent: 29px;line-height: 1.8"
        ref="box"
        v-if="briefName=='京沪扩建'"
      >
        京沪高速公路沂淮淮江段扩建工程是国家高速公路网主通道，是我省“十三五”开工建设的交通重点工程。项目建设对于贯彻实施长江经济带发展战略，提升国家公路大通道的通行能力和服务水平，加强苏北、苏中地区与苏南地区的经济联系，促进项目沿线城市化进程和经济社会协调发展均具有极其重要意义。
      </div>

      <p
        style="width: 100%;text-align: right;color: #1492FF;cursor: pointer;margin-top: 10px;"
        @click="showMore"
        v-if="this.boxHeight>75&&isShowMore"
      >显示全部</p>

      <p
        style="width: 100%;text-align: right;color: #1492FF;cursor: pointer;margin-top: 10px;"
        @click="showMore"
        v-if="this.boxHeight>75&&!isShowMore"
      >收起</p>

      <div class="title1Box flexAlignCenter">参建单位</div>
      <div class="participatingUnitsBox flexDirectionCenter">
        <div
          class="flexAlignCenter"
          @click="goConstructionUnit(item)"
          v-for="(item,index) in unitList"
          :key="index"
        >
          <img src="../../assets/bigSquare3.jpg" alt />
          <span class="mainText">{{item.name}}</span>
          <span style="width: 150px" class="paraphrase">标段号：{{item.tenderName}}</span>
          <span class="paraphrase">监理单位：{{item.parentOrgName}}</span>
        </div>
      </div>
    </div>

    <!--底部技术支持-->
    <supportCompany></supportCompany>
  </div>
</template>

<script>
import title1 from '@/views/title/index.vue'
import supportCompany from '@/views/supportCompany/index.vue'
import { orgDetailQuery } from '@/api/orgDetail'
export default {
  mounted() {
    window.scrollTo(0, 0)
    this.imgUrl=[]
    this.imgUrl.push(JSON.parse(sessionStorage.getItem('imgdata')).img_content)
    this.projectTitle = JSON.parse(sessionStorage.getItem('imgdata')).detail
    this.briefName = JSON.parse(sessionStorage.getItem('imgdata')).briefName
    // this.projectBriefName = JSON.parse(sessionStorage.getItem('saveData')).userInfo.projectBriefName
    // console.log(this.$route.query);
    this.homeFlag = JSON.parse(sessionStorage.getItem('homeFlag'))
    this.projectId = sessionStorage.getItem('projectId')
    this.getDetail()
    let str = ''
    str = window.getComputedStyle(this.$refs.box).height
    this.boxHeight = parseInt(str.substring(0, str.length - 2))
  },
  data() {
    return {
      home: '/gateway',
      height: 'auto',
      boxHeight: '',
      isShowMore: true,
      briefName: '',
      imgUrl: [],
      projectTitle: '',
      projectId: '',
      unitList: [],
      homeFlag: false,
      // projectBriefName:''
    }
  },
  components: {
    title1,
    supportCompany
  },
  methods: {
    showMore() {
      this.isShowMore = !this.isShowMore

      if (this.isShowMore) {
        this.height = 'auto'
      } else {
        this.height = '75px'
      }
    },
    goConstructionUnit(item) {
      // console.log(item);
      let t = true
      this.$router.push({ path: '/fu/construction', query: { data: item } })
      sessionStorage.setItem('projectFlag', t)
      sessionStorage.setItem('homeFlag', t)
      sessionStorage.setItem('gatewayId', item.id)
      sessionStorage.setItem('laborName', item.name)
      sessionStorage.setItem('tenderName', item.tenderName)
    },
    getDetail() {
      let data = {
        page: 0,
        projectId: this.projectId,
        size: 0
      }
      orgDetailQuery(data).then((res) => {
        let data = res.data.data
        this.unitList = data
        // console.log(this.unitList);
      })
    }
  },
  computed: {
    styleVar() {
      return {
        '--box-height': this.height
      }
    }
  }
}
</script>

<style scoped>
div,
p,
span {
  font-family: 'Microsoft YaHei';
}
.breadCrumbBox {
  width: 100%;
  height: 40px;
  background-color: rgba(246, 248, 249, 1);
  position: fixed;
  top: 100px;
}
::v-deep .ant-breadcrumb > span:last-child a {
  color: rgba(20, 146, 255, 1);
}
.mainContentBox {
  width: 1200px;
  margin: auto;
  margin-bottom: 110px;
}
.title1Box {
  width: 100%;
  height: 91px;
  font-size: 32px;
}
.title2Box {
  width: 100%;
  height: 130px;
  font-size: 32px;
}
.projectDetailBox {
  width: 1200px;
  height: 382px;
}
.projectInfoBox {
  width: 650px;
  height: 382px;
  background-color: rgba(246, 248, 249, 1);
  padding: 30px;
  padding-top: 28px;
  padding-bottom: 10px;
}
.box {
  height: var(--box-height);
}
.participatingUnitsBox {
  width: 1200px;
  /*height: 442px;*/
}
.participatingUnitsBox > div {
  width: 100%;
  height: 88px;
  background-color: #f6f8f9;
  margin-bottom: 30px;
}
.participatingUnitsBox > div:hover {
  background-color: #1492ff;
  cursor: pointer;
}
.participatingUnitsBox > div:hover .mainText {
  color: white;
}
.participatingUnitsBox > div:hover .paraphrase {
  color: white;
}
.participatingUnitsBox > div > img {
  margin-left: 30px;
}
.mainText {
  margin-left: 39px;
  font-weight: bold;
  color: #333333;
  font-size: 18px;
  width: 250px;
}
.paraphrase {
  color: #999999;
  font-size: 16px;
  font-weight: 400;
  margin-left: 60px;
}
.flexBetween > img {
  width: 550px;
  height: 382px;
  object-fit: cover;
}
</style>
